<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button><br/><br/><br/>
    <div>a的值{{numbers.a}}</div>
    <button @click="numbers.a++">点击a++</button><br/><br/><br/>
    <div>b的值{{numbers.b}}</div>
    <button @click="numbers.b++">点击b++</button><br/><br/><br/>
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el:"#root",
      data:{
        isHot:true,
        numbers:{a:1,b:1}
      },
      computed:{
        info(){
          return this.isHot?'炎热':'凉爽';
        }
      },
      methods:{
        changeWeather(){
          this.isHot=!this.isHot
        }
      },
      watch:{
        //正常写法
        /*isHot:{
          deep:true,//深度监视
          handler(newValue,oldValue){
            console.log('ishot被修改,newValue,oldValue',newValue,oldValue)
          }/!*,
          //配置为true时,初始化就会执行hanler函数
          immediate:true*!/
        }*/
        //简写,默认只有有一个handler函数
        isHot(newValue,oldValue){
          console.log('ishot被修改,newValue,oldValue',newValue,oldValue)
        }
      }
    });
    //简写
    /*vm.$watch('isHot',function (){
      console.log('ishot被修改,newValue,oldValue',newValue,oldValue)
    })*/

  </script>

</body>
</html>
